<template>
  <view class="information">
    <view class="optionList">
      <view class="optionItem">
        <text class="optionTitle">小程序名称</text>
        <input
          type="text"
          placeholder="请输入小程序名称"
          v-model="form.mini_nickname"
          :disabled="status != 1 && status != 8"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序头像</text>
        <view class="addPic" @click="addPic('mini_url')" v-if="!form.mini_url">
          <text class="iconfont icon-camera"></text>
          <text>上传图片</text>
        </view>
        <view class="addPic" @click="addPic('mini_url')" v-else>
          <image :src="form.mini_url"></image>
        </view>
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序简介</text>
        <input
          type="text"
          placeholder="请输入小程序简介"
          v-model="form.signature"
          :disabled="status != 1 && status != 8"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序分类</text>
        <view
          class="chooseType"
          v-for="(item, index) in currentCat"
          :key="index"
          @click="delCat(item, index)"
        >
          <text>{{ item.first_name + "=>" + item.second_name }}</text>
          <text class="iconfont icon-close"></text>
        </view>
        <view
          class="chooseType"
          @click="showCat"
          v-if="!currentCat || currentCat.length < 5"
        >
          <text>添加分类</text>
          <text class="iconfont icon-add-select"></text>
        </view>
      </view>
      <view class="optionItem" v-if="isFile">
        <text class="optionTitle">{{ isFile }}</text>
        <view
          class="addPic addPic2"
          @click="addPic('file_data')"
          v-if="!form.file_data"
        >
          <text class="iconfont icon-camera"></text>
          <text>上传图片</text>
        </view>
        <view class="addPic addPic2" @click="addPic('file_data')" v-else>
          <image :src="form.file_data"></image>
        </view>
      </view>
      <u-select
        v-model="showCats"
        mode="mutil-column-auto"
        label-name="name"
        value-name="id"
        :list="allCat"
        @confirm="changeCat"
      ></u-select>
    </view>
    <view class="footer">
      <u-button
        @click="submitBtn"
        :custom-style="{ width: '600rpx', height: '80rpx' }"
        type="error"
        shape="circle"
        :disabled="status == 4 || status == 7"
        >{{ btnText }}</u-button
      >
    </view>
  </view>
</template>

<script>
import myPicker from "./myPicker.vue";
import http from "@/common/http.js";
export default {
  components: {
    myPicker
  },
  props: {
    bind_store_id: {
      type: [String, Number],
      default: ""
    },
    status: {
      type: [String, Number],
      default: ""
    },
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    allCat: {
      type: Array,
      default: () => {
        return [];
      }
    },
    allOldCat: {
      type: Array,
      default: () => {
        return [];
      }
    },
    currentCat: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      // 表单信息
      form: {
        mini_nickname: "",
        mini_url: "",
        signature: "",
        categories: [],
        file_data: ""
      },
      categories: [],
      // 显示分类的选择列表
      showCats: false,
      currentCatCopy: [],

      isFile: false
    };
  },
  computed: {
    btnText() {
      if (this.status == 1 || this.status == 8) {
        return "立即完善";
      }
      if (this.status == 2 || this.status == 5) {
        return "更新模板";
      }
      if (this.status == 3) {
        return "立即审核";
      }
      if (this.status == 4) {
        return "审核中";
      }
      if (this.status == 6) {
        return "立即发布";
      }
      if (this.status == 7) {
        return "资料审核中";
      }
    }
  },
  methods: {
    addPic(el) {
      if (this.status != 1 && this.status != 8) return;

      this.$utils.uploadImage(1, (res) => {
        this.form[el] = res.url;
        if (el == "file_data") {
          this.changeCat();
        }
      });
    },

    // 点击提交审核按钮
    async submitBtn() {
      if (this.status == 4 || this.status == 7) {
        return;
      }
      if (this.status == 1 || this.status == 8) {
        this.submit();
      }
      if (this.status == 2 || this.status == 5) {
        this.updateTem();
      }
      if (this.status == 3) {
        this.subAudit();
      }
      if (this.status == 6) {
        this.releaseApp();
      }
    },
    // 点击添加分类
    async changeCat(e) {
      let name = "";
      let status = "";
      let cat = "";
      if (this.isFile) {
        //资质信息
        cat = {
          categories: [
            {
              key: this.isFile,
              value: this.form["file_data"]
            }
          ]
        };

        //如果需要上传类目资质，则将图片信息添加进请求数据中
        this.categories = this.categories.map((item, index) => {
          return { ...item, ...cat };
        });
      } else {
        //记录所选的类目ID
        this.categories = [{ first: e[0].value, second: e[1].value }];

        //判断是否需要上传资料
        let all_old_cat = this.allOldCat;
        for (let i in e) {
          for (let j of all_old_cat) {
            if (e[i].value == j.id && j.qualify.exter_list[0]) {
              name = j.qualify.exter_list[0]["inner_list"][0]["name"];

              if (name) {
                this.isFile = name;
              } else {
                this.isFile = false;
              }
            }
          }
        }
        //获取选择的类目，并创建对象
        let cat = {
          first: e[0].value,
          first_name: e[0].label,
          second: e[1].value,
          second_name: e[1].label,
          audit_status: 0,
          file: this.isFile
        };

        //将新创建的对象添加至原类目中
        this.currentCatCopy.push(cat);
        this.$emit("changeCurrentCat", this.currentCatCopy);
      }

      let param = {
        bind_store_id: this.bind_store_id,
        categories: this.categories
      };

      //如果需要上传类目资质，则第一次不进行提交
      if (!this.isFile || name === "") {
        const res = await this.$allrequest.merchant.addCat(param, true);
        if (res.code == 0) {
          this.categories = "";
          this.isFile = false;
          this.$emit("submit");
        }
      }
    },
    // 点击删除分类
    delCat(item, index) {
      if (this.status != 1 && this.status != 8) {
        return;
      }
      const that = this;
      uni.showModal({
        title: "提示",
        content: "确认删除该分类?",
        async success(res) {
          if (res.confirm) {
            if (item.audit_status === 0) {
              that.currentCatCopy.splice(index);
              if (item.file !== false) {
                that.isFile = false;
              }
              return;
            }
            const res = await that.$allrequest.merchant.delCat({
              bind_store_id: that.bind_store_id,
              cate_first: item.first,
              cate_second: item.second
            });
            if (res.code == 0) {
              that.$emit("submit");
            }
          } else if (res.cancel) {
          }
        }
      });
    },
    // 完善资料上传资料
    // 点击提交审核
    async submit() {
      if (!this.form.mini_nickname) {
        uni.showToast({
          title: "请填写小程序名称",
          icon: "none"
        });
        return;
      }
      if (!this.form.mini_url) {
        uni.showToast({
          title: "请上传小程序头像",
          icon: "none"
        });
        return;
      }
      if (!this.form.signature) {
        uni.showToast({
          title: "请填写小程序简介",
          icon: "none"
        });
        return;
      }
      let param = {
        bind_store_id: this.bind_store_id,
        ...this.form
      };
      const res = await this.$allrequest.merchant.comMini(param, true);
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    // 更新模板
    async updateTem() {
      const res = await this.$allrequest.merchant.updateTem(
        {
          bind_store_id: this.bind_store_id
        },
        true
      );
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    // 提交审核
    async subAudit() {
      const res = await this.$allrequest.merchant.subAudit(
        {
          bind_store_id: this.bind_store_id
        },
        true
      );
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    // 提交审核
    async releaseApp() {
      const res = await this.$allrequest.merchant.releaseApp(
        {
          bind_store_id: this.bind_store_id
        },
        true
      );
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    // 显示分类
    showCat() {
      if (this.status != 1 && this.status != 8) {
        return;
      }
      this.showCats = true;
    }
  },
  created() {
    this.form = this.info;
    this.currentCatCopy = this.currentCat;
  }
};
</script>

<style lang="scss" scoped>
.information {
  .optionList {
    padding-left: 24rpx;
    background-color: #fff;
    .optionItem {
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      padding-right: 30rpx;
      .optionTitle {
        margin-bottom: 24rpx;
      }
      .optionChoose {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      .chooseType {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #8c8c8c;
        font-size: 24rpx;
        height: 80rpx;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      input {
        width: 100%;
      }
      .tip {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 24rpx;
        display: flex;
        flex-direction: column;
      }
      .sceneList {
        display: flex;
        flex-wrap: wrap;
        text {
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 24rpx;
          background-color: #f2f2f2;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #8c8c8c;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
          font-weight: 600;
        }
        .current {
          border: 1px solid #f60313;
          background-color: #fbeceb;
          color: #f0250e;
        }
      }
      .addPic {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 24rpx;
        color: #8c8c8c;

        &.addPic2 {
          width: 100%;
          height: 350rpx;
        }

        .iconfont {
          font-size: 56rpx;
          margin-bottom: 12rpx;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .optionItem:last-child {
      border-bottom: none;
    }
  }
  .footer {
    display: flex;
    padding-top: 10rpx;
    justify-content: center;
    border-top: 1px solid #f8f8f8;
    padding-bottom: 10rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    .btn {
      width: 80%;
      height: 80rpx;
      border-radius: 999px;
      background-color: #f0250e;
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
